<template>
	<block v-for="(item, index) in doctor_data" :key="index">
		<!-- 个人信息 -->
		<view class="homepage-back">
			<view class="doctor-int">
				<image :src="item.avatar" mode="aspectFill"></image>
				<view>
					<view class="doctor-int name-padd">
						<text class="do-name">{{ item.name }}</text>
						<text>{{ item.post }}</text>
					</view>
					<text>{{ item.hospital }}</text>
				</view>
			</view>
			<view class="good-at">{{ item.good_at }}</view>
		</view>
		<!-- 选择时间 -->
		<view class="homepage-back">
			<text class="res-Title">预约挂号</text>
			<view class="table">
				<view class="table-left">
					<text>日期</text>
					<text>上午</text>
					<text>下午</text>
				</view>
				<scroll-view scroll-x="true" class="scroll-view_H" enable-flex="true">
					<view class="TR" v-for="(item_a, index_a) in item.App_ment" :key="index_a">
						<view>
							<text class="table-day">{{ item_a.day }}</text>
							<text>{{ item_a.week }}</text>
						</view>
						<!-- 0:下午 -->
						<view :class="[item_a.time[0].nu_source <= 0 ? 'Disa' : 'Have']"
							@click="selectTime(item_a.week, item_a.time[0].the_time, item_a.time[0].when)">
							{{ item_a.time[0].nu_source <= 0 ? '' : '预约' }} </view>
								<!-- 1:下午 -->
								<view :class="[item_a.time[1].nu_source <= 0 ? 'Disa' : 'Have']"
									@click="selectTime(item_a.week, item_a.time[1].the_time, item_a.time[1].when)">
									{{ item_a.time[1].nu_source <= 0 ? '' : '预约' }} </view>
								</view>
				</scroll-view>
			</view>
		</view>
	</block>
	<!-- 提示 -->
	<view class="prompt">
		<text>重要提示:</text>
		<text>1.本次预约就诊当天不可取消预约,如需取消,请在就诊前一天的24:00之前操作,累计取消或爽约三次可能会被列入医院黑名单,请按需预约</text>
		<text>2.预约挂号暂不支持医保支付,若本次挂号使用手机在线支付,就诊过程中的门诊检验检查,处方费用可能不支持医保支付</text>
	</view>
	<!-- 弹窗组件 -->
	<popups ref="compNone" />
	<!-- 骨架屏 -->
	<!-- <skIndex v-if="skeLeton"></skIndex> -->
</template>
  
<script setup lang="ts">
// 1.引入基础模块
import { onLoad } from "@dcloudio/uni-app";
import { ref, reactive, toRefs, onMounted } from 'vue'
import { reqDoctorhome, reqRegappoin } from '@/serve/api'
import { doctorDescType } from '@/types/index'
import popups from './components/pop-ups.vue'// 预约弹窗组件
import skIndex from '@/Skeleton/SK-doctor-home.vue'// 骨架屏

// 2.定义页面响应式数据
let pageData = reactive({
	_id: "",//传递的医生数据id
	doctor_data: [] as doctorDescType[],//医生数据
	skeLeton: true,//骨架屏开关
})
let { _id, doctor_data, skeLeton } = toRefs(pageData)

// 3、获取数据
onLoad(async (event: any) => {
	pageData._id = event.id
	let { data } = await reqDoctorhome({ _id: event.id })
	// console.log(data)
	pageData.doctor_data = data
	pageData.skeLeton = false
})

// 调用子组件的方法，传值过去
let compNone = ref()
function selectTime(week: string, the_time: string[], when: number) {
	// console.log(week, the_time, when)
	// 组装子组件需要的数据
	let value = { show: true, week, the_time, when, _id: pageData._id }
	// 通过子组件实例唤起子组件方法5
	compNone.value.trigGer(value)
}

</script>
  
  
<style>
page {
	background: linear-gradient(to bottom, #e8f4ff 30%, #f2f7fb 55%, #f0f5f9 90%);
}

.homepage-back {
	background-color: #ffffff;
	padding: 20rpx;
	margin: 20rpx;
	border-radius: 10rpx;
}

/* 顶部 */
.doctor-int image {
	display: block;
	width: 150rpx;
	height: 150rpx;
	margin-right: 20rpx;
}

.doctor-int {
	display: flex;
	align-items: center;
}

.do-name {
	font-size: 35rpx;
	font-weight: bold;
	padding-right: 10rpx;
}

.name-padd {
	padding-bottom: 20rpx;
}

.good-at {
	line-height: 1.5;
	padding-top: 20rpx;
}

/* 预约挂号 */
.res-Title {
	display: block;
	padding-bottom: 20rpx;
	font-size: 35rpx;
}

.table {
	display: flex;
}

.table-left text {
	display: block;
	height: 140rpx;
	line-height: 140rpx;
	border: 0.5rpx solid #dfdfdf;
}

.table-left {
	width: 100rpx;
	text-align: center;
}

.scroll-view_H {
	white-space: nowrap;
	overflow: scroll;
	width: 100%;
	display: flex;
	height: 440rpx;
}

.TR {
	display: inline-block;
	text-align: center;
	white-space: pre-wrap;
	height: fit-content;
}

.TR text {
	display: block;
}

.TR view {
	width: 130rpx;
	height: 140rpx;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	border: 0.5rpx solid #dfdfdf;
}

.table-day {
	color: #8c8c8c;
}

/* 禁用点击 */
.Disa {
	pointer-events: none;
}

/* 有号 */
.Have {
	background-color: #0075ff;
	color: #ffffff;
}

/* 提示 */
.prompt text {
	display: block;
	padding: 10rpx 20rpx;
	font-size: 26rpx;
	color: #636468;
	line-height: 1.5;
}
</style>